<template>
  <!-- 这是登录页 -->
  <div id="login">
    <h1>张科瑞的crm客户管理系统</h1>
    <h3>为保护企业的数据安全，请妥善保管密码</h3>
    <!-- 登录框 -->
    <div id="box">
      <div id="boxicon"></div>
      <div class="container">
        <div>
          <p>Username or email address</p>
          <input
            type="text"
            v-model="account"
            placeholder="手机号"
            onfocus="this.placeholder=''"
            onblur="this.placeholder='手机号'"
          />
        </div>
        <div>
          <p>Password</p>
          <input
            type="text"
            v-model="password"
            placeholder="请输入登录密码"
            onfocus="this.placeholder=''"
            onblur="this.placeholder='请输入登录密码'"
          />
        </div>
        <div class="btn">
          <input type="button" value="登录" @click="handleSubmitName" />
        </div>
      </div>
    </div>
    <!-- 图片 -->
    <div id="loginimg">
      <img src="" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      account: "",
      password: "",
    };
  },
  methods: {
    handleSubmitName() {
      //如果用户名不符合规范则弹出警告框
      let regphone = /^1\d{10}$/;
      let regemail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      let regusername = /^([a-z]| [\u4e00-\u9fa5])+$/;
      console.log(!regphone.test(this.account));
      //失败情况
      if (
        !regphone.test(this.account) &&
        !regemail.test(this.account) &&
        !regusername.test(this.account)
      ) {
        this.$message("输入的用户名不符合格式！");
      }
      this.handleSubmitPassword();
      //
      
        this.gotoshouye();
      
    },
    handleSubmitPassword() {
      let regpassword = /^\w{6,20}$/;
      if (!regpassword.test(this.password)) {
        this.$notify({
          title: "错误提示",
          message: "密码不符合要求（6-20位英文字符加数字）",
          position: "top-left",
        });
      }
    },
    //去到首页
    gotoshouye() {
      if (this.account === "admin" && this.password === "123456") {
        localStorage.setItem('name',JSON.stringify({
          power:'admin',
          name:'admin'
        }))
        this.$message("正在去到首页，请稍后");
        window.location.href = origin;
        return;
      }
      let self_this = this;
      this.$axios.get("/getUsers").then(function (res) {
        let usersData = res.data;
        console.log(typeof usersData);
        usersData.forEach((item) => {
          if (item.phoneNumber == self_this.account) {
            if (item.password == self_this.password) {
              //在浏览器中设置cookie
              localStorage.setItem('name',JSON.stringify(item));
              self_this.$message("正在去到首页，请稍后");
              window.location.href = origin;
            }
          }
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
#login {
  h1 {
    text-align: center;
    font-size: 30px !important;
    color: #ffffff;
    margin-top: 50px;
  }
  h3 {
    text-align: center;
    color: #ffffff;
  }
  position: relative;

  width: 100%;
  height: 100%;
  background: url(./assets/zan.png) no-repeat center;
  background-size: contain;
  background-color: lightblue;
  overflow: hidden;
  #box {
    width: 500px;
    height: 500px;
    margin: 50px auto;
    .container {
      height: 450px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      border: 1px solid green;
      border-radius: 50px;
      box-shadow: 0px 0px 5px #333333;
      div {
        p {
          text-align: center;
          color: #b1ade6;
        }
        input {
          margin-left: 100px;
          height: 40px;
          border-radius: 10px;
          outline: none;
          font-size: 20px;
          padding-left: 10px;
          width: 300px;
          border: 1px solid red;
        }
        &.btn {
          input {
            background: #2da44e;
            cursor: pointer;
          }
        }
      }
    }
    #boxicon {
      width: 50px;
      height: 50px;
      background: url(./assets/28.png) no-repeat center;
      background-size: contain;
      margin: 0 auto;
      margin-bottom: 20px;
    }
  }
}
</style>>
    
